<template>
  <el-form
    v-bind="$attrs"
    ref="elForm"
    :model="model"
    :rules="rules"
    :label-position="labelPosition"
    :label-width="labelWidth"
    :label-suffix="labelSuffix"
    :inline="inline"
    :inline-message="inlineMessage"
    :status-icon="statusIcon"
    :show-message="showMessage"
    :size="size"
    :disabled="disabled"
    :validate-on-rule-change="validateOnRuleChange"
    :hide-required-asterisk="hideRequiredAsterisk"
    :scroll-to-error="scrollToError"
    @submit.prevent="handleSubmit"
    @validate="handleValidate"
  >
    <slot />
  </el-form>
</template>

<script>
export default {
  name: 'MyElForm',
  inheritAttrs: false,
  props: {
    model: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    labelPosition: {
      type: String,
      default: 'right',
      validator: (value) => {
        return ['left', 'right', 'top'].includes(value)
      }
    },
    labelWidth: {
      type: [String, Number],
      default: undefined
    },
    labelSuffix: {
      type: String,
      default: ''
    },
    inline: {
      type: Boolean,
      default: false
    },
    inlineMessage: {
      type: Boolean,
      default: false
    },
    statusIcon: {
      type: Boolean,
      default: false
    },
    showMessage: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['large', 'default', 'small'].includes(value)
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    validateOnRuleChange: {
      type: Boolean,
      default: true
    },
    hideRequiredAsterisk: {
      type: Boolean,
      default: false
    },
    scrollToError: {
      type: Boolean,
      default: false
    }
  },
  emits: ['submit', 'validate'],
  methods: {
    handleSubmit() {
      this.$emit('submit')
    },
    handleValidate(prop, valid, message) {
      this.$emit('validate', prop, valid, message)
    },
    // 表单验证方法
    validate(callback) {
      return this.$refs.elForm?.validate(callback)
    },
    validateField(prop, callback) {
      return this.$refs.elForm?.validateField(prop, callback)
    },
    resetFields() {
      return this.$refs.elForm?.resetFields()
    },
    clearValidate(props) {
      return this.$refs.elForm?.clearValidate(props)
    },
    scrollToField(prop) {
      return this.$refs.elForm?.scrollToField(prop)
    }
  }
}
</script> 